import Highlight from "react-syntax-highlighter";
import { darcula } from "react-syntax-highlighter/dist/esm/styles/hljs";
import "./index.scss";
import { CopyOutlined } from "@ant-design/icons";
import copy from "copy-to-clipboard";
import { message, Tooltip } from "antd";
function Code({
  content,
  type = "typescript",
}: {
  content: string;
  type?: "typescript" | "css" | "npm";
}) {
  const handlerCopy = () => {
    copy(content);
    message.success("复制成功");
  };
  return (
    <div className="code-container">
      <Tooltip placement="top" title="复制" color="lime">
        <CopyOutlined onClick={handlerCopy} className="copy" />
      </Tooltip>

      <Highlight language={type} showLineNumbers style={darcula}>
        {content}
      </Highlight>
    </div>
  );
}

export default Code;
